<template>
  <el-dialog v-if="popenevTVisible" title="评论" :visible.sync="popenevTVisible" :before-close="handleCancel" width="800px" :close-on-click-modal="false">
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%;margin: 20px 0;"
        class="table"
        v-loading="loading"
        :header-cell-style="{'background-color': '#daebfe'}"
      >
        <el-table-column 
          prop="xh"
          width="100"
          label="序号">
        </el-table-column>
        <el-table-column 
          prop="createTime"
          width="150"
          label="日期">
        </el-table-column>
        <el-table-column 
          prop="createName"
          width="100"
          label="评论人">
        </el-table-column>
        <el-table-column 
          prop="comment" 
          label="评论内容">
        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button
              v-if="showDelete"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <div class="hc-view-page" ref="hcviewpage">
        <pagination v-if="!loading" v-show="totalCount > 0" :total="totalCount" :page.sync="currentpage" :limit.sync="pageSize" @pagination="onPageChange" />
      </div>
      <div v-if="sfpl == 0" style="margin-top: 20px;">
        <div class="comment">
          <el-input type="textarea" :rows="4" v-model="comments" />
        </div>
        <div style="text-align: right;margin-top: 10px;">
          <el-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
            发表评论
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import { getCommentList, submitComment, delComment } from '../../api/commonApi';
export default {
  data () {
    return {
      // 显示弹框
      popenevTVisible: true,
      // 是否评论
      sfpl: null,
      // 评论
      comments: '',
      // 提交加载中
      submitting: false,
      // 评论列表数据
      tableData: [],
      // 活动unid
      unid: '',
      // 是否显示删除按钮
      showDelete: false,
      //加载中
      loading: false,
      //总数
      totalCount: 0,
      //当前页码
      currentpage: 1,
      //每页数量
      pageSize: 10,
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    // 显示弹框
    show(data, config)
    {
      console.log(this.userInfo)
      this.sfpl = data.sfpl
      this.unid = data.unid
      this.getCommentList()
      this.userInfo.roleKey.forEach(item => {
        if (item.roleName == '文化宣传:删除')
        {
          this.showDelete = true
        }
      })
      // 创建promise
      return new Promise((resolve, reject) =>
      {
        this.promiseStatus = {
          resolve,
          reject,
        };
      });
    },
    // 获取评论列表数据
    getCommentList()
    {
      var param = {
        zlUnid: this.unid,
        pageSize: this.pageSize,
        pageNum: this.currentpage,
      }
      this.loading = true;
      getCommentList(param).then(res => {
        console.log(res, '评论列表')
        this.tableData = res.result.data
        this.totalCount = res.result.totalCount;

        if (this.tableData.length > 0)
        {
          this.tableData.map((item, index) => {
            item.xh = index + 1
          })
        }
      }).finally(() =>
      {
        this.loading = false
      });
    },
    //分页跳转
    onPageChange()
    {
      if (this.pageSize * (this.currentpage - 1) > this.totalCount)
      {
        this.currentpage = 1;
      }
      this.getCommentList();
    },
    // 发表评论
    handleSubmit()
    {
      console.log(this.comments, '评论')
      if (!this.comments) {
        this.$message.warning('请输入评论内容')
        return;
      }
      this.submitting = true;
      setTimeout(() => {
        this.submitting = false;
        var params = {
          zlUnid: this.unid,
          zlName: '测试资料',
          comment: this.comments
        }
        submitComment(params).then(res => {
          console.log(res, '评论')
          this.$message.success('评论成功')
          this.getCommentList()
        }).catch(err => {
          console.log(err)
        })
        this.comments = '';
      }, 1000);
    },
    // 删除评论
    handleDelete(index, row)
    {
      console.log(index, row)
      this.$confirm("是否删除该条评论?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(res =>
      {
        delComment({ unids: row.unid })
          .then((res) =>
          {
            this.$message.success("删除成功");
            this.getCommentList();
          })
      })
    },
    // 关闭弹框
    handleCancel()
    {
      this.promiseStatus.reject({
        msg: "取消",
      });
      this.popenevTVisible = false;
    }
  }
}
</script>

<style scoped>
.table /deep/ .el-table__cell {
  padding: 10px 0 !important;
}
</style>